<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <title>碳烤水果</title>
</head>
	<body>
		<div id="details">
			<!--<div class="goodsTitle">
				<span class="back"></span>
				碳烤水果
			</div>-->
			<div class="goodshHead">
				<img class="goodsBg" src="images/image@1x.png"/>
				<img class="goodsIcon" src="images/image1@1x.png"/>
				<span class="goodsPrice">￥<i class="price">70.5</i></span>
			</div>
			<div class="goodsCon">
				<span class="goodsClass">炭烤类</span>
				<span class="goodsName">炭烤类  蔬菜水果</span>
				<span class="goodsEenergy">
					<i class="gram">300KG</i><i class="calorie">200卡路里</i>
				</span>
				<span class="goodsDes">土豆，蒜苗，茄子，番茄</span>
			</div>
			<div class="goodsSales">
				<div class="sale">
					<span class="num">1000</span>
					月销
				</div>
				<div class="acclaim">
					<span class="num">80%</span>
					好评
				</div>
				<div class="agio">
					<span class="num">80%</span>
					折扣
				</div>
			</div>
			<div class="evaluate">
				<span class="evalClass">商品评价</span>
				<div class="all starCon">
					<i class="star_on"></i>
					<i class="star_on"></i>
					<i class="star_on"></i>
					<i class="star_on"></i>
					<i class="star"></i>
				</div>
				<div class="evalCon">
					<span class="evalTitle">80%人评价这款商品</span>
					<div class="evalUsercon">
						<a href="javascript:void(0);" class="userList">
							<img src="images/user_photo1@1x.png"/>
						</a>
						<a href="javascript:void(0);" class="userList">
							<img src="images/user_photo1@1x.png"/>
						</a>
						<a href="javascript:void(0);" class="userList">
							<img src="images/user_photo3@1x.png"/>
						</a>
						<a href="javascript:void(0);" class="userList">
							<img src="images/user_photo4@1x.png"/>
						</a>
					</div>
					<div class="userNum">
						+45
					</div>
					<div class="evalList">
						<div class="list">
							<div class="starCon">
								<i class="star_on"></i>
								<i class="star_on"></i>
								<i class="star_on"></i>
								<i class="star_on"></i>
								<i class="star"></i>
							</div>
							<div class="userName">悠悠老师</div>
							<div class="listContent">
								<p class="content">😍 我很喜欢这一道菜</p>
							</div>
						</div>
						<div class="list">
							<div class="starCon">
								<i class="star_on"></i>
								<i class="star_on"></i>
								<i class="star_on"></i>
								<i class="star"></i>
								<i class="star"></i>
							</div>
							<div class="userName">李陈先生</div>
							<div class="listContent">
								<p class="content">😍 我很喜欢这一道菜</p>
								<div class="videoImg">
									<img src="images/pinglun_photo1@1x.png"/>
									<img src="images/pinglun_photo1@1x.png"/>
									<img src="images/pinglun_photo1@1x.png"/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--遮罩层-->
		<div class="mask"></div>
		<div id="addC">
			<img class="addCar" src="images/btn_add@1x.png"/>
			<div class="flavor">
				<div class="flavorClass">选择你的喜好</div>
				<img class="flavImg" src="images/image1@1x.png"/>
				<ul class="flavList">
					<li class="list">
						<span class="listcheck check" data="0" data-id="1"></span>
						<span class="name">偏重辣</span>
						<div class="count">
							<span class="minus" onclick="minus(this)">-</span>
							<input class="num" value="1">
							<span class="plus" onclick="plus(this)">+</span>
						</div>
					</li>
					<li class="list">
						<span class="listcheck check" data="0" data-id="2"></span>
						<span class="name">偏重辣</span>
						<div class="count">
							<span class="minus" onclick="minus(this)">-</span>
							<input class="num" value="1">
							<span class="plus" onclick="plus(this)">+</span>
						</div>
					</li>
					<li class="list">
						<span class="listcheck check_on" data="1" data-id="3"></span>
						<span class="name name_on">偏重辣</span>
						<div class="count">
							<span class="minus" onclick="minus(this)">-</span>
							<input class="num" value="1">
							<span class="plus" onclick="plus(this)">+</span>
						</div>
					</li>
				</ul>
				<div class="btncon">
					<button class="goCar" onclick="addCar()">加入购物车</button>
				</div>
			</div>
		</div>

<script type="text/javascript">
	//弹出口味
	$('.addCar').on('click',function(){
		$(this).hide(100)
		$('#addC').animate({
			height:"8.233rem"
		},200)
		$('html,body').css('overflow','hidden')
		$('.mask').animate({
			height:"100%",
		},200).show()
	})

	$('.mask').on('click',function(){
		$('.addCar').show()
		$('#addC').animate({
			height:"0"
		},200)
		$('html,body').css('overflow','auto')
		$(this).animate({
			height:"0",
		},200).hide()
	})
    	$('.flavList .list .listcheck').on('click',function(){
    		var check=$(this).attr('data')
        if(check==0){
        	$(this).attr('data',1).parent().siblings().find('.listcheck').attr('data',0)
        	$(this).removeClass('check').addClass('check_on').parent().siblings().find('.listcheck').addClass('check').removeClass('check_on');
        	$(this).next().addClass('name_on').parent().siblings().find('.name').removeClass('name_on')
        }else{
        	$(this).attr('data',0).parent().siblings().find('.listcheck').attr('data',1)
        	$(this).removeClass('check_on').addClass('check');
        	$(this).next().removeClass('name_on')
        }
    	})

     //加入购物车
     function addCar(){
 		var goodsprice = $('.price').html();   // 商品价格
		var categoryname = $('.goodsClass').html();	// 类别名称
		var goodsname = $('.goodsName').html();	// 商品名称
		var goodspic = $('.flavImg').attr('src')  // 商品照片
		var goodsnum = 1;
		var goodstasteId = $('.check_on').attr('data-id'); // 口味id 分别为123
     	/*$(".listcheck").each(function () {
     		if ($(this).attr("data") == 1){
     			//添加数据到购物车ajax

     			//添加之后产生的效果
     			$('.addCar').show()
				$('#addC').animate({
					height:"0"
				},200)
				$('html,body').css('overflow','auto')
				$('.mask').animate({
					height:"0",
				},200).hide()
     		}else{
     			console.log(11)
     			return false;
     		}
     	})*/
     }
	 function plus(this3) {
         var a = $(this3).prev().val();
         var kc_num = parseInt($(this3).closest('.lb').find(".kc_num").val())
         var good_num = parseInt($(this3).closest('.lb').find(".num").val())
         if (kc_num <= good_num) {
             alert('超出库存')
             return false;
         } else {
             a++
             $(this3).prev().val(a);
         }
     }

     function minus(this2) {
         var a = $(this2).next().val();
         a--;
         if (a >= 1) {
             $(this2).next().val(a);
         }
     }




 

//添加之后产生的效果
$('.addCar').show()
$('#addC').animate({
	height:"0"
},200)
$('html,body').css('overflow','auto')
$('.mask').animate({
	height:"0",
},200).hide()
</script>
</body>
</html>
